<script setup>
import { ref, onMounted } from "vue";
import ChatList from "@/components/ChatList.vue";
import ChatMessages from "@/components/ChatMessages.vue";
import { useMessageStore } from "@/stores/message";

const messageStore = useMessageStore();
const currentChat = ref(null);

const handleSelectChat = async (chat) => {
  currentChat.value = chat;
  try {
    await messageStore.getChatHistory(chat.imKey);
    messageStore.markMessagesAsRead(chat.imKey);
  } catch (error) {
    console.error("获取历史消息失败:", error);
  }
};

onMounted(() => {
  messageStore.initSocketListeners();
  messageStore.getChatList();
});
</script>

<template>
  <div class="service-message">
    <el-container class="message-container">
      <!-- 左侧聊天列表 -->
      <el-aside width="300px" class="chat-list-aside">
        <ChatList @select-chat="handleSelectChat" />
      </el-aside>

      <!-- 右侧聊天窗口 -->
      <el-main class="chat-main">
        <ChatMessages v-if="currentChat" :chat="currentChat" />
        <div v-else class="no-chat-selected">
          <el-empty description="请选择一个聊天" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.service-message {
  height: 100%;
}

.message-container {
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chat-list-aside {
  border-right: 1px solid #e6e6e6;
  background-color: #f5f7fa;
}

.chat-main {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.no-chat-selected {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 